(function ($w, $d) {
    let pg = {}
    pg.options = {
        elm: '', // 元素id
        count: 0, // 总数据量
        size: 15, // 页大小
        index: 1, // 页索引
        total: 0, // 总页数
        look: 10, // 显示页数
        click: null // 点击页的回调函数
    }
    pg.newElm = (h) => {
        var o = document.createElement("a") // 创建一个元素容器
        o.innerHTML = h // 设定元素的innerHtml
        return o.firstChild // 返回容器元素的第一个子元素
    }
    pg.render = ops => {
        pg.options = Object.assign(pg.options, ops)
        let o = pg.options
        o.total = Math.ceil(o.count / o.size)
        pg.show(false)
    }
    pg.show = (isto) => {
        let o = pg.options
        let html = `<div class="apage-container">
                    <div onclick="apage.first()">&lt;&lt;</div>
                    <div onclick="apage.prev()">&lt;</div>`
        if (o.total == 0) {

        }
        else if (o.total <= o.look) {
            for (let i = 1; i <= o.total; i++) {
                html += `<div class="${i == o.index ? 'active' : ''}" onclick="apage.to(${i})">${i}</div>`
            }
        }
        else {
            if (o.index <= Math.ceil(o.look / 2)) {
                for (let i = 1; i < o.look; i++) {
                    html += `<div class="${i == o.index ? 'active' : ''}" onclick="apage.to(${i})">${i}</div>`
                }
            } else if (o.index > o.total - Math.ceil(o.look / 2)) {
                for (let i = o.total - o.look; i <= o.total; i++) {
                    html += `<div class="${i == o.index ? 'active' : ''}" onclick="apage.to(${i})">${i}</div>`
                }
            } else {
                for (let i = o.index - Math.ceil(o.look / 2); i < o.index + Math.ceil(o.look / 2); i++) {
                    html += `<div class="${i == o.index ? 'active' : ''}" onclick="apage.to(${i})">${i}</div>`
                }
            }
        }
        html += `<div onclick="apage.next()">&gt;</div>
                <div onclick="apage.last()">&gt;&gt;</div>
                <input class="apage-input" value="${o.index}" placeholder="跳转页数" onchange="apage.input(this)" />
                <div class="apage-info">${o.index} / ${o.total}</div>
                </div>`
        let elm = document.querySelector(o.elm)
        elm.innerHTML = html
        if (isto && o.click) o.click({
            page: o.index,
            size: o.size
        })
    }
    pg.next = p => {
        let o = pg.options
        if (o.index < o.total)
            o.index++
        pg.show(true)
    }
    pg.prev = p => {
        let o = pg.options
        if (o.index > 1)
            o.index--
        pg.show(true)
    }
    pg.to = p => {
        let o = pg.options
        o.index = p
        pg.show(true)
    }
    pg.first = p => {
        let o = pg.options
        o.index = 1
        pg.show(true)
    }
    pg.last = p => {
        let o = pg.options
        o.index = o.total
        pg.show(true)
    }
    pg.input = e => {
        let idx = e.value - 0
        let o = pg.options
        if (idx < 1) idx = 1
        else if (idx > o.total) idx = o.total
        o.index = idx
        pg.show(true)
    }
    pg.remove = p => {
        let o = pg.options
        if (o.elm)
            document.querySelector(o.elm).innerHTML = ''
    }

    $w.apage = pg

    let css = `<style>.apage-container{display:flex;justify-content:center;margin:15px 0;}.apage-container div{border:1px solid #ddd;padding:2px 8px;margin:0 2px;font-size:13px;border-radius:3px;cursor:pointer;}.apage-container div:hover{background-color:#ff6666;color:#fff;border-color:#ff6666;}.apage-container div.active{background-color:#ff6666;color:#fff;border-color:#ff6666;}.apage-container div.apage-info{border:0;color:#aaa;}.apage-container .apage-input{border:1px solid #666;border-radius:3px;box-sizing:border-box;margin:0 5px;padding:0 8px;outline:none;width:73px;}</style>`
    let style = pg.newElm(css)
    $d.head.appendChild(style)
})(window, document)